<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>水务基础图层展示</title>
    <link rel="stylesheet" href="./css/ol.css" type="text/css" />
    <link rel="stylesheet" href="./css/ktol3.css" type="text/css" />
    <link rel="stylesheet" href="./css/mapPop.css" type="text/css" />
    <link href="./css/widgets.css" rel="stylesheet" />
    <link href="./css/pretty.css" rel="stylesheet" />

    <link href="./css/bootstrap3.3.7.min.css" rel="stylesheet" />
    <style>
        .cesium-viewer .cesium-widget-credits {
            display: none !important;
        }

        #toolbar {
            height: 80%;
            overflow-y: auto;
        }

        .node-tree1:not(.node-disabled):hover {
            background-color: unset !important;
        }

        #toolbar .list-group-item {
            position: relative;
            display: block;
            padding: unset;
            margin-bottom: -1px;
            background-color: unset;
            border: unset;
        }

        #menu {
            position: absolute;
            z-index: 2;
            padding: 6px 3px 6px 10px;
            margin-right: 20px;
            right: 30px;
            top: 10px;
            border-radius: 4px;
            -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
            box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            background: #fff;
        }

        label {
            margin: 0;
            margin-right: 10px;
        }
    </style>
</head>
<script type="text/javascript" src="./js/jquery.min.3.2.1.js"></script>
<script type="text/javascript" src="./js/bootstrap3.3.7.min.js"></script>
<script type="text/javascript" src="./js/bootstrap-treeview.js"></script>


<script type="text/javascript" src="./js/ol.js"></script>
<script type="text/javascript" src="./js/proj4.js"></script>


<body style="margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;">
<div id="map" style="width: 100%;height:100%"></div>
<div id='menu' class="mapboxgl-ctrl">
    <input id='image' type='radio' name='rtoggle' value='image' checked='checked'>影像底图
    <input id='dark' type='radio' name='rtoggle' value='dark'>矢量黑夜底图
</div>
<div id="toolbar" class="param-container tool-bar" style="position: absolute;margin: 10px;top:0;left: 30px;
            z-index: 100;">
    <div id="tree1">
    </div>
</div>
<script type="text/javascript">
    var defaultData = [{
        text: "水利水务对象",
        nodes: [{
            text: "全要素图",
            url: 'http://192.168.101.44/iserver/services/map-ugcv5-szmapR/wmts-china',
            layer: 'szmap_R',
            matrixSet: 'Custom_szmap_R'
        }, {
            text: "行政区划",
            url: 'http://192.168.101.44/iserver/services/map-sz_adm/wmts-china',
            layer: 'sz_adm_R',
            matrixSet: 'Custom_sz_adm_R'
        }, {
            text: "流域",
            url: 'http://192.168.101.44/iserver/services/map-SZ_bas/wmts-china',
            layer: 'SZ_bas_R',
            matrixSet: 'Custom_SZ_bas_R'
        }, {
            text: "二级排水分区",
            url: 'http://192.168.101.44/iserver/services/map-sz_sda2/wmts-china',
            layer: 'sz_sda2_R',
            matrixSet: 'Custom_sz_sda2_R'
        }, {
            text: "河流",
            url: 'http://192.168.101.44/iserver/services/map-sz_rv/wmts-china',
            layer: 'sz_rv_R',
            matrixSet: 'Custom_sz_rv_R'
        }, {
            text: "水库",
            url: 'http://192.168.101.44/iserver/services/map-sz_rswb/wmts-china',
            layer: 'sz_rswb_R',
            matrixSet: 'Custom_sz_rswb_R'
        }, {
            text: "水库滞洪区",
            url: 'http://192.168.101.44/iserver/services/map-sz_rfda/wmts-china',
            layer: 'sz_rfda_R',
            matrixSet: 'Custom_sz_rfda_R'
        }, {
            text: "大坝",
            url: 'http://192.168.101.44/iserver/services/map-sz_dam/wmts-china',
            layer: 'sz_dam_R',
            matrixSet: 'Custom_sz_dam_R'
        }, {
            text: "堤防",
            url: 'http://192.168.101.44/iserver/services/map-sz_dike/wmts-china',
            layer: 'sz_dike_R',
            matrixSet: 'Custom_sz_dike_R'
        }, {
            text: "水闸",
            url: 'http://192.168.101.44/iserver/services/map-sz_gate/wmts-china',
            layer: 'sz_gate_R',
            matrixSet: 'Custom_sz_gate_R'
        }, {
            text: "水电站工程",
            url: 'http://192.168.101.44/iserver/services/map-sz_hypo/wmts-china',
            layer: 'sz_hypo_R',
            matrixSet: 'Custom_sz_hypo_R'
        }, {
            text: "给水加压泵站",
            url: 'http://192.168.101.44/iserver/services/map-sz_wsbp/wmts-china',
            layer: 'sz_wsbp_R',
            matrixSet: 'Custom_sz_wsbp_R'
        }, {
            text: "排水雨水泵站",
            url: 'http://192.168.101.44/iserver/services/map-sz_drp/wmts-china',
            layer: 'sz_drp_R',
            matrixSet: 'Custom_sz_drp_R'
        }, {
            text: "现状雨水泵站",
            url: 'http://192.168.101.44/iserver/services/map-SZ_crp/wmts-china',
            layer: 'SZ_crp_R',
            matrixSet: 'Custom_SZ_crp_R'
        }, {
            text: "排水污水泵站",
            url: 'http://192.168.101.44/iserver/services/map-sz_dsp/wmts-china',
            layer: 'sz_dsp_R',
            matrixSet: 'Custom_sz_dsp_R'
        }, {
            text: "其它泵站",
            url: 'http://192.168.101.44/iserver/services/map-sz_pump/wmts-china',
            layer: 'sz_pump_R',
            matrixSet: 'Custom_sz_pump_R'
        }, {
            text: "地表水水源地",
            url: 'http://192.168.101.44/iserver/services/map-sz_suws/wmts-china',
            layer: 'sz_suws_R',
            matrixSet: 'Custom_sz_suws_R'
        }, {
            text: "入河湖排污口",
            url: 'http://192.168.101.44/iserver/services/map-sz_pdo/wmts-china',
            layer: 'sz_pdo_R',
            matrixSet: 'Custom_sz_pdo_R'
        }, {
            text: "河湖取水口",
            url: 'http://192.168.101.44/iserver/services/map-sz_wint/wmts-china',
            layer: 'sz_wint_R',
            matrixSet: 'Custom_sz_wint_R'
        }, {
            text: "河道水位站",
            url: 'http://192.168.101.44/iserver/services/map-sz_st_zz/wmts-china',
            layer: 'sz_st_zz_R',
            matrixSet: 'Custom_sz_st_zz_R'
        }, {
            text: "水库水文站",
            url: 'http://192.168.101.44/iserver/services/map-sz_st_rr/wmts-china',
            layer: 'sz_st_rr_R',
            matrixSet: 'Custom_sz_st_rr_R'
        }, {
            text: "雨量站",
            url: 'http://192.168.101.44/iserver/services/map-sz_st_pp/wmts-china',
            layer: 'sz_st_pp_R',
            matrixSet: 'Custom_sz_st_pp_R'
        }, {
            text: "潮位站",
            url: 'http://192.168.101.44/iserver/services/map-sz_st_tt/wmts-china',
            layer: 'sz_st_tt_R',
            matrixSet: 'Custom_sz_st_tt_R'
        }, {
            text: "污水池",
            url: 'http://192.168.101.44/iserver/services/map-sz_cspl/wmts-china',
            layer: 'sz_cspl_R',
            matrixSet: 'Custom_sz_cspl_R'
        }, {
            text: "积涝点水位站",
            url: 'http://192.168.101.44/iserver/services/map-sz_amp/wmts-china',
            layer: 'sz_amp_R',
            matrixSet: 'Custom_sz_amp_R'
        }, {
            text: "内涝点",
            url: 'http://192.168.101.44/iserver/services/map-sz_wlgp/wmts-china',
            layer: 'sz_wlgp_R',
            matrixSet: 'Custom_sz_wlgp_R'
        }, {
            text: "抢险队伍",
            url: 'http://192.168.101.44/iserver/services/map-sz_rt/wmts-china',
            layer: 'sz_rt_R',
            matrixSet: 'Custom_sz_rt_R'
        }, {
            text: "三防仓库",
            url: 'http://192.168.101.44/iserver/services/map-sz_wh/wmts-china',
            layer: 'sz_wh_R',
            matrixSet: 'Custom_sz_wh_R'
        }, {
            text: "排水渠",
            url: 'http://192.168.101.44/iserver/services/map-sz_drd/wmts-china',
            layer: 'sz_drd_R',
            matrixSet: 'Custom_sz_drd_R'
        }, {
            text: "排放口",
            url: 'http://192.168.101.44/iserver/services/map-sz_swg/wmts-china',
            layer: 'sz_swg_R',
            matrixSet: 'Custom_sz_swg_R'
        }, {
            text: "补水点",
            url: 'http://192.168.101.44/iserver/services/map-SZ_wsp/wmts-china',
            layer: 'SZ_wsp_R',
            matrixSet: 'Custom_SZ_wsp_R'
        }, {
            text: "城市供水水质监测点",
            url: 'http://192.168.101.44/iserver/services/map-SZ_wqmp/wmts-china',
            layer: 'SZ_wqmp_R',
            matrixSet: 'Custom_SZ_wqmp_R'
        }, {
            text: "水井",
            url: 'http://192.168.101.44/iserver/services/map-SZ_well/wmts-china',
            layer: 'SZ_well_R',
            matrixSet: 'Custom_SZ_well_R'
        }, {
            text: "避险中心",
            url: 'http://192.168.101.44/iserver/services/map-sz_hedge_center/wmts-china',
            layer: 'sz_hedge_center_R',
            matrixSet: 'Custom_sz_hedge_center_R'
        }, {
            text: "河道断面",
            url: 'http://192.168.101.44/iserver/services/map-sz_rb/wmts-china',
            layer: 'sz_rb_R',
            matrixSet: 'Custom_sz_rb_R'
        }, {
            text: "给水处理设施",
            url: 'http://192.168.101.44/iserver/services/map-sz_wtf/wmts-china',
            layer: 'sz_wtf_R',
            matrixSet: 'Custom_sz_wtf_R'
        }, {
            text: "排水检查井",
            url: 'http://192.168.101.44/iserver/services/map-sz_diw/wmts-china',
            layer: 'sz_diw_R',
            matrixSet: 'Custom_sz_diw_R'
        }, {
            text: "供引水工程",
            url: 'http://192.168.101.44/iserver/services/map-sz_ditr/wmts-china',
            layer: 'sz_ditr_R',
            matrixSet: 'Custom_sz_ditr_R'
        }, {
            text: "污泥处置设施",
            url: 'http://192.168.101.44/iserver/services/map-sz_sdf/wmts-china',
            layer: 'sz_sdf_R',
            matrixSet: 'Custom_sz_sdf_R'
        }]
    }]

    const BASE_LAYERS = {
        image: 'http://192.168.101.44:8889/api161/tilemap_1/rest/services/SZIMAGE/SZAVI201712_20ZW2K/ImageServer/tile/{z}/{y}/{x}',
        dark: 'http://192.168.101.44:8889/api161/tilemap_1/rest/services/SZMAP/SZMAP_BLUE_ZW2K/MapServer/tile/{z}/{y}/{x}'
    }
    // 4490坐标系需自定义
    proj4.defs('EPSG:4490', '+proj=longlat +ellps=GRS80 +no_defs')
    var projection = new ol.proj.get('EPSG:4490')
    projection.setExtent([-180, -90, 180, 90])

    // 指定此Arcgis图层的分辨率
    var resolutions = [
        0.001373291015624828,
        0.000686645507812414,
        0.000343322753906207,
        0.0001716613769531035,
        0.00008583068847655175,
        0.000042915344238275876,
        0.000021457672119137938,
        0.000010728836059568969,
        0.0000053644180297844846,
        0.0000026822090148922423,
        0.0000013411045074461211
    ]
    var matrixIds = []
    for (var z = 0; z < resolutions.length; ++z) {
        matrixIds[z] = z
    }
    var url = BASE_LAYERS.image
    var view = new ol.View({
        projection: projection, //坐标系参数如果不设置，则默认为墨卡托
        resolutions: resolutions, //分辨率层级数组
        center: [114.139825956825, 22.6513875967627],
        zoom: 1,
    })

    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                id: 'baseLayer',
                source: new ol.source.XYZ({
                    url: url,
                    projection: projection,
                    tileGrid: new ol.tilegrid.WMTS({
                        origin: [-180, 90],
                        tileSize: 256,
                        resolutions: resolutions,
                        matrixIds: matrixIds
                    })
                })
            })
        ],
        target: 'map',
        controls: ol.control.defaults({
            attributionOptions: {
                collapsible: false
            }
        }),
        view: view
    })

    var currentLayerGroupId = "image";
    var layerList = document.getElementById('menu');
    var inputs = layerList.getElementsByTagName('input');
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].onclick = switchStyle;
    }

    function switchStyle(layer) {
        var layerGroupId = layer.target.id;
        if (!layerGroupId) return;
        let layers = map.getLayers().getArray()
        let findLayer = null
        for (let each of layers) {
            if (each.getProperties()['id'] === 'baseLayer') {
                findLayer = each
            }
        }
        if (findLayer) map.removeLayer(findLayer)
        var url = BASE_LAYERS[layerGroupId]
        var baseLayer = new ol.layer.Tile({
            id: 'baseLayer',
            source: new ol.source.XYZ({
                url: url,
                projection: projection,
                tileGrid: new ol.tilegrid.WMTS({
                    origin: [-180, 90],
                    tileSize: 256,
                    resolutions: resolutions,
                    matrixIds: matrixIds
                })
            })
        })
        map.addLayer(baseLayer)
        baseLayer.setZIndex(0)
        currentLayerGroupId = layerGroupId;
    }

    var nodeCheckedSilent = false;

    function nodeChecked(event, node) {
        if (nodeCheckedSilent) return;
        nodeCheckedSilent = true;
        addWMTSLayer(node.nodeId, node)
        checkAllParent(node);
        checkAllSon(node);
        nodeCheckedSilent = false;
    }

    var nodeUncheckedSilent = false;

    function nodeUnchecked(event, node) {
        if (nodeUncheckedSilent) {
            return
        }
        nodeUncheckedSilent = true;
        removeWMTSLayer(node.nodeId)
        uncheckAllParent(node);
        uncheckAllSon(node);
        nodeUncheckedSilent = false;
    }

    //选中全部父节点
    function checkAllParent(node) {
        $('#tree1').treeview('checkNode', node.nodeId, {
            silent: true
        });

        var parentNode = $('#tree1').treeview('getParent', node.nodeId)
        if (!("nodeId" in parentNode)) {
            return;
        } else {
            checkAllParent(parentNode);
        }
    }
    //取消全部父节点
    function uncheckAllParent(node) {
        $('#tree1').treeview('uncheckNode', node.nodeId, {
            silent: true
        });
        var siblings = $('#tree1').treeview('getSiblings', node.nodeId);
        var parentNode = $('#tree1').treeview('getParent', node.nodeId);
        if (!("nodeId" in parentNode)) {
            return
        };
        var isAllUnchecked = true; //是否全部没选中
        for (var i in siblings) {
            if (siblings[i].state.checked) {
                isAllUnchecked = false;
                break;
            }
        }
        if (isAllUnchecked) uncheckAllParent(parentNode);
    }

    //级联选中所有子节点
    function checkAllSon(node) {
        $('#tree1').treeview('checkNode', node.nodeId, {
            silent: true
        });
        if (node.nodes != null && node.nodes.length > 0) {
            for (var i in node.nodes) {
                addWMTSLayer(node.nodes[i].nodeId, node.nodes[i])
                checkAllSon(node.nodes[i]);
            }
        }
    }
    //级联取消所有子节点
    function uncheckAllSon(node) {
        $('#tree1').treeview('uncheckNode', node.nodeId, {
            silent: true
        });
        if (node.nodes != null && node.nodes.length > 0) {
            for (var i in node.nodes) {
                removeWMTSLayer(node.nodes[i].nodeId)
                uncheckAllSon(node.nodes[i]);
            }
        }
    }

    $('#tree1').treeview({
        showCheckbox: true,
        data: defaultData,
        onNodeChecked: nodeChecked,
        onNodeUnchecked: nodeUnchecked,
        levels: 3
    })
    // 默认不选
    $('#tree1').treeview('uncheckAll', {
        silent: true
    })

    // 加载图层
    function addWMTSLayer(key, params) {
        let layers = map.getLayers().getArray()
        let findLayer = null
        for (let each of layers) {
            if (each.getProperties()['id'] === key) {
                findLayer = each
            }
        }
        if (findLayer) {
            map.removeLayer(findLayer)
        }
        var resolutionL = [
            0.0013717509172233532,
            0.0006858754586116766,
            0.0003429377293058383,
            0.00017146886465291915,
            0.00008573443232645957,
            0.00004286721616322979,
            0.000021433608081614893,
            0.000010716804040807447,
            0.000005358402020403723,
            0.0000026792010102018617,
            0.0000013396005051009308
        ]
        var matrixIdsL = []
        for (var z = 0; z < resolutionL.length; ++z) {
            matrixIdsL[z] = z
        }
        var layer = new ol.layer.Tile({
            source: new ol.source.WMTS({
                url: params.url,
                layer: params.layer,
                matrixSet: params.matrixSet,
                format: 'image/png',
                tileGrid: new ol.tilegrid.WMTS({
                    origin: [-180, 90],
                    tileSize: 256,
                    resolutions: resolutionL,
                    matrixIds: matrixIdsL
                }),
                style: 'default'
            })
        })
        layer.set('id', key)
        map.addLayer(layer)
        layer.setZIndex(5)
    }

    // 移除图层
    function removeWMTSLayer(key) {
        let layers = map.getLayers().getArray()
        let findLayer = null
        for (let each of layers) {
            if (each.getProperties()['id'] === key) {
                findLayer = each
            }
        }
        if (findLayer) {
            map.removeLayer(findLayer)
        }
    }
</script>
</body>

</html>